<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" href="../../build/aui-css/css/bootstrap.css">
    <script src="../../build/aui/aui.js"></script>
    <style>
    .demo {
        -webkit-transition: 0.5s ease-in;
        -moz-transition: 0.5s ease-in;
        -o-transition: 0.5s ease-in;
        -ms-transition: 0.5s ease-in;
        transition: 0.5s ease-in;
    }
    .view-lt320 .demo,
    .view-320 .demo {
        width: 54px;
        height: 105px;
        background: url(assets/phone_portrait.png) no-repeat;
    }
    .view-480 .demo {
        width: 102px;
        height: 52px;
        background: url(assets/phone_landscape.png) no-repeat;
    }
    .view-720 .demo {
        width: 114px;
        height: 145px;
        background: url(assets/tablet_portrait.png) no-repeat;
    }
    .view-960 .demo {
        width: 207px;
        height: 167px;
        background: url(assets/desktop.png) no-repeat;
    }
    .demo:after {
        background: #333;
        color: #fff;
        font-size: 1.5em;
        text-shadow: -1px -1px #000;
        position: absolute;
        padding: 10px;
        border-radius: 3px;
    }
    .view-lt320 .demo:after,
    .view-320 .demo:after {
        content: 'Smart Phone (320px)';
        left: 79px;
    }
    .view-480 .demo:after {
        content: 'Smart Phone Landscape (480px)';
        left: 127px;
    }
    .view-720 .demo:after {
        content: 'Tablet (720px)';
        left: 129px;
    }
    .view-960 .demo:after {
        content: 'Desktop (>= 960px)';
        left: 232px;
    }
    </style>
</head>
<body>
    <h1>AlloyUI - Viewport</h1>
    <h2>Resize your browser window to see more info.</h2>
    <div class="log"></div>
    <div class="demo"></div>
    <script>
    YUI({ filter:'raw' }).use('aui-viewport');
    </script>
</body>
</html>